<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card-xs ky-card-hdbg">
      <el-form :inline="true" class="ky-form-inline ky-form-inline-sm">
        <el-form-item label="医院" label-width="50px">
          <el-select
            size="small"
            v-model="hospitalCode"
            placeholder="请选择医院"
            clearable
            filterable
          >
            <el-option
              v-for="item in mx_hospitalList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <section class="content-section statement-data ky-mt20">
      <dl>
        <dt>
          预约数<i>{{appointmentsNum}}</i>
        </dt>
        <dd>
          <span
          >周同比<i
          >{{weekPercent}}<em class="blue el-icon-caret-top"></em></i></span
          ><span
          >日环比<i>{{dayPercent}}</i
          ><em class="red el-icon-caret-bottom"></em
          ></span>
        </dd>
        <dd>
          <span>日均预约数：{{dayAppointmentsNum}}</span>
        </dd>
      </dl>
      <dl>
        <dt>
          平台爽约率<i>{{platformBreakRate}}</i>
        </dt>
        <el-progress :percentage="76" :stroke-width="12"></el-progress>
        <dd>
          <span
          >周同比<i
          >{{weekPercent2}}<em class="blue el-icon-caret-top"></em></i></span
          ><span
          >日环比<i
          >{{dayPercent2}}<em class="red el-icon-caret-bottom"></em></i
          ></span>
        </dd>
      </dl>
    </section>
    <section class="content-section echart-bar">
      <div class="echart-tab">
        <ol>
          <li
            v-for="(item, index) in tabs"
            @click="clickTab(index)"
            :class="{ active: index == num }"
            :key="index"
          >
            {{item}}
          </li>
        </ol>
        <div class="date-tab">
          <p>
            <span
              v-for="(item, index) in dateArr"
              @click="clickDate(index)"
              :class="{ active: index == current }"
              :key="index"
            >{{item}}</span
            >
          </p>
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="echart-tab-con">
        <div id="echartsBar" class="echarts-bar"></div>
        <div class="rank">
          <h3>机房预约量</h3>
          <ol>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
            <li><span>超声一室</span><span>323,234</span></li>
          </ol>
        </div>
      </div>
    </section>
    <section class="content-data">
      <div class="content-table">
        <h3>后勤人员工作量统计</h3>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{ padding: '3px 7px' }"
          :cell-style="{ padding: '7px' }"
          :default-sort="{ prop: 'weekUp', order: 'descending' }"
        >
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="number" label="护送数" width="180">
          </el-table-column>
          <el-table-column prop="weekUp" label="周涨幅" sortable>
            <template slot-scope="scope">
              {{scope.row.weekUp}}
              <span
                :class="
                  scope.row.type == 1
                    ? 'el-icon-top blue'
                    : 'el-icon-bottom red'
                "
              >
              </span>
            </template>
          </el-table-column>
        </el-table>
        <paginationCont
          :total="totalCount"
          :page.sync="currentPage"
          :limit.sync="pageSize"
          @pagination="fetchData"
        />
      </div>
      <div class="content-pie">
        <h3>预约方式占比</h3>
        <div id="pie"></div>
      </div>
    </section>
    <section class="content-progress">
      <ul>
        <li>
          <span>机房一</span>
          <el-progress
            type="circle"
            :percentage="25"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>机房二</span>
          <el-progress
            type="circle"
            :percentage="55"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>机房三</span>
          <el-progress
            type="circle"
            :percentage="87"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>超声机房</span>
          <el-progress
            type="circle"
            :percentage="46"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>心电机房一</span>
          <el-progress
            type="circle"
            :percentage="66"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>心电机房二</span>
          <el-progress
            type="circle"
            :percentage="45"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
        <li>
          <span>心电机房三</span>
          <el-progress
            type="circle"
            :percentage="14"
            :stroke-width="10"
            :width="90"
            :height="90"
            :format="format"
          ></el-progress>
        </li>
      </ul>
    </section>
    <section class="content-line">
      <div id="line"></div>
    </section>
  </div>
</template>
<script>
import echartsTooltipCarousel from '@/utils/echarts-tooltip-carousel'
import dateTime from '@/utils/dateTime'
import paginationCont from '@/components/Pagination/index'
export default {
  components: {
    paginationCont
  },
  data() {
    return {
      hospitalCode: '',
      appointmentsNum: '126,560',
      weekPercent: '12%',
      dayPercent: '11%',
      dayAppointmentsNum: '21324',
      platformBreakRate: '78%',
      weekPercent2: '12%',
      dayPercent2: '11%',
      tabs: ['机房预约量', '项目预约量'],
      num: 0,
      dateArr: ['今日', '本周', '本月', '全年'],
      current: null,
      date: '',
      xDate: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23',
        '24'
      ],
      sDate: [
        5,
        20,
        36,
        10,
        10,
        20,
        5,
        20,
        36,
        10,
        10,
        20,
        5,
        20,
        36,
        10,
        10,
        20,
        5,
        20,
        36,
        10,
        10,
        20
      ],
      tableData: [
        {
          name: '张三',
          number: '2222',
          weekUp: '50%',
          type: 1
        },
        {
          name: '李四',
          number: '321',
          weekUp: '40%',
          type: 2
        },
        {
          name: '张三',
          number: '2222',
          weekUp: '50%',
          type: 2
        },
        {
          name: '李四',
          number: '321',
          weekUp: '40%',
          type: 1
        },
        {
          name: '张三',
          number: '2222',
          weekUp: '50%',
          type: 2
        }
      ],
      totalCount: 4,
      pageSize: 10,
      currentPage: 1
    }
  },
  created() {
    this.init()
  },
  mounted() {
    this.echartsBar()
    this.echartsPie()
    this.echartsLine()
  },
  methods: {
    // 初始化
    init() {
      this.$getHospitalList()
      this.hospitalCode = this.mx_hospitalList[0].code || ''
    },
    // tab
    clickTab(index) {
      this.num = index
    },
    // 点击选中时间
    clickDate(index) {
      this.current = index
      if (index === 0) {
        this.date = [dateTime.getDate(0), dateTime.getDate(0)]
      } else if (index === 1) {
        this.date = [dateTime.getMonday('s', 0), dateTime.getMonday('e', 0)]
      } else if (index === 2) {
        this.date = [dateTime.getMonth('s', 0), dateTime.getMonth('e', 0)]
      } else if (index === 3) {
        this.date = [dateTime.getYear('s', 0), dateTime.getYear('e', 0)]
      }
    },
    // 选择时间
    changeDate(e) {
      this.current = null
    },
    // 机房预约量
    echartsBar() {
      let myChart = this.$echarts.init(document.getElementById('echartsBar'))
      let option = {
        color: ['#3ba1ff'],
        title: {
          text: '预约量趋势',
          textStyle: {
            fontSize: 17,
            fontWeight: 100
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}：{c}人'
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '17%',
          bottom: '20'
        },
        xAxis: {
          data: this.xDate,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12,
              innerWidth: 30
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#e8e8e8'],
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '机房预约量',
            type: 'bar',
            data: this.sDate
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 24, 3000)
    },
    echartsPie() {
      let myChart = this.$echarts.init(document.getElementById('pie'))
      let option = {
        color: [
          '#1890ff',
          '#2fc25b',
          '#facc14',
          '#f04864',
          '#8543e0',
          '#13c2c2',
          '#666'
        ],
        grid: {
          top: '0%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          top: '20%',
          right: '20',
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#5a5a5a',
            fontSize: 12,
            padding: [6, 0, 0, 0]
          },
          data: [
            '预约中心',
            '移动端预约',
            '门诊预约',
            '护士工作站',
            '外院预约',
            '其他'
          ],
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue = 0
            for (let i = 0, l = data.length; i < l; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            let p = ((tarValue / total) * 100).toFixed(2)
            return name + ' ' + ' ' + p + '%'
          }
        },
        series: [
          {
            name: '预约方式占比',
            type: 'pie',
            radius: ['60%', '80%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16
              }
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            },
            data: [
              { value: 36, name: '预约中心' },
              { value: 20, name: '移动端预约' },
              { value: 16, name: '门诊预约' },
              { value: 10, name: '护士工作站' },
              { value: 9, name: '外院预约' },
              { value: 9, name: '其他' }
            ]
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      echartsTooltipCarousel.autoHover(myChart, option, 6, 2000)
    },
    // 批量pies
    format(percentage) {
      return '预约率' + '\n' + percentage + '%'
    },
    // 分页
    fetchData() {},
    echartsLine() {
      let myChart = this.$echarts.init(document.getElementById('line'))
      let option = {
        color: ['#1890ff', '#2fc25b'],
        title: {
          text: '预约量',
          textStyle: {
            fontSize: 17,
            fontWeight: 100
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['爽约量', '预约量'],
          right: 20
        },
        grid: {
          left: '5%',
          right: '3%'
        },
        dataZoom: [
          {
            startValue: '2019-05-24'
          },
          {
            type: 'inside'
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '2019-05-21',
            '2019-05-22',
            '2019-05-23',
            '2019-05-24',
            '2019-05-25',
            '2019-05-26',
            '2019-05-27'
          ],
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          // axisLabel: {
          //   formatter: '{value}'
          // },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#5a5a5a',
              fontSize: 12,
              innerWidth: 30
            }
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['#e8e8e8'],
              width: 1,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '爽约量',
            type: 'line',
            data: [10, 20, 41, 14, 100, 300, 37],
            itemStyle: {
              color: '#5bd1db'
            },
            lineStyle: {
              width: 3
            }
          },
          {
            name: '预约量',
            type: 'line',
            data: [5, 20, 40, 12, 30, 222, 33],
            itemStyle: {
              color: '#00ef09'
            },
            lineStyle: {
              width: 3
            }
          }
        ]
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.statement-data {
  display: flex;
  padding: 0;
  dl {
    width: 265px;
    height: 185px;
    color: #929292;
    padding: 20px;
    margin: 0;
    border-right: 1px solid #f0f0f0;
    overflow: hidden;
    dt {
      i {
        display: block;
        font-style: normal;
        font-size: 36px;
        color: #272727;
        margin-top: 8px;
      }
    }
    .el-progress {
      margin-top: 22px;
      .el-progress__text {
        display: none;
      }
    }
    dd {
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      i {
        font-style: normal;
        margin-left: 10px;
      }
    }
    dd:last-child {
      justify-content: left;
      border-top: 1px solid #e9e9e9;
      color: #5a5a5a;
      height: 40px;
      line-height: 40px;
    }
  }
  dl:last-child {
    dd:last-child {
      justify-content: space-between;
      span:last-child {
        margin-left: 0;
      }
    }
  }
}
.echart-bar {
  position: relative;
  margin-top: 10px;
  padding: 10px 20px 20px;
  color: #333;
  overflow: hidden;
  .echart-tab {
    border-bottom: 1px solid #e8e8e8;
    padding: 10px 0 0;
    overflow: hidden;
    li {
      float: left;
      font-size: 17px;
      padding: 0 15px 15px;
      cursor: pointer;
    }
    li.active {
      color: #1890ff;
      border-bottom: 2px solid #108de9;
      padding-bottom: 16px;
    }
  }
}
.date-tab {
  display: flex;
  align-items: center;
  position: absolute;
  top: 20px;
  right: 20px;
  p {
    margin-right: 10px;
    span {
      margin: 0 10px;
      cursor: pointer;
    }
    span.active {
      color: #1890ff;
    }
  }
}
.echarts-bar {
  width: 70%;
  height: 280px;
  float: left;
  margin-top: 20px;
}
.rank {
  width: 30%;
  float: left;
  h3 {
    font-size: 17px;
    font-weight: 100;
    margin-top: 20px;
  }
  ol {
    margin-top: 18px;
    li {
      display: flex;
      justify-content: space-between;
      white-space: nowrap;
      counter-increment: index;
      height: 35px;
      line-height: 35px;
      color: #5a5a5a;
    }
    li span:nth-child(1)::before {
      content: counter(index);
      display: inline-block;
      font-size: 14px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      background: #f0f2f5;
      border-radius: 50%;
      margin-right: 20px;
    }
    li:nth-child(1) span:nth-child(1)::before,
    li:nth-child(2) span:nth-child(1)::before,
    li:nth-child(3) span:nth-child(1)::before {
      background: #314659;
      color: #e9ebed;
    }
  }
}
.content-data {
  overflow: hidden;
  .content-table,
  .content-pie {
    background: #fff;
    margin-top: 10px;
    padding: 5px 20px;
    width: 50%;
    float: left;
    h3 {
      font-size: 17px;
      font-weight: 100;
    }
  }
}
.content-pie {
  border-left: 10px solid #f1f2f5;
  #pie {
    width: 100%;
    height: 278px;
  }
}

.content-progress {
  background: #fff;
  margin-top: 10px;
  ul {
    display: flex;
    li {
      text-align: center;
      padding: 25px 33px;
      border-right: 1px solid #f1f2f5;
      span {
        display: block;
        margin-bottom: 12px;
        font-weight: 400;
        font-size: 16px;
      }
    }
  }
}
.content-line {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  #line {
    width: 100%;
    height: 300px;
  }
}
</style>
<style>
.echart-bar .el-tabs__item {
  font-size: 16px;
}
.echart-bar .el-date-editor {
  width: 290px;
}
.content-progress .el-progress__text {
  white-space: pre-line;
  line-height: 20px;
}
.statement-data dl .el-progress .el-progress__text {
  display: none;
}
.statement-data dl .el-progress .el-progress-bar {
  width: 120%;
}
.red {
  color: #f53b45;
}
.blue {
  color: #8fd96b;
}
</style>
